<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<table border="1" cellspacing="0">
    <tr>
        <th></th>
        <th>评价等级</th>
        <th>评价内容</th>
        <th>用户ID</th>
        <th>所属订单ID</th>
        <th>创建评价时间</th>
        <th>追加评论时间</th>
    </tr>
    <tbody class="container"></tbody>
    <tr>
        <td>
            <button class="button_del">删除选中留言</button>
        </td>
    </tr>
</table>

<form id="frm_evaluate">
    <table border="1">
        <tr>
            <th>等级:</th>
            <th><input type="text" name="evaluateLevel"></th>
        </tr>
        <tr>
            <th>评价ID:</th>
            <th><input type="text" name="evaluateId"></th>
        </tr>
        <tr>
            <th>评价:</th>
            <th>
                <textarea name="evaluateComm" id="introduce" cols="30" rows="10" placeholder="请留下您宝贵的建议"></textarea>
            </th>
        </tr>
    </table>
    <input type="button" value="更新评价" id="btn_submit">
</form>
<script>
    var $_btn_del = $(".button_del");
    $(function(){
        fillTable();
    });

    function fillTable(){
        $.ajax({
            url: "http://localhost:8080/evaluate/getByUser/1",
            type: "post",
            dataType: "json",
            success: function (evaluate) {
                $(".container").empty();
                for (let i = 0; i < evaluate.length; i++) {
                    var $_tr = $("<tr></tr>");
                    var $_td0 = $("<td><input type='checkbox' value='" + evaluate[i].evaluateId + "'></td>");
                    var $_td1 = $("<td>" + evaluate[i].evaluateLevel + "</td>");
                    var $_td2 = $("<td>" + evaluate[i].evaluateComm + "</td>");
                    var $_td3 = $("<td>" + evaluate[i].userId + "</td>");
                    var $_td4 = $("<td>" + evaluate[i].recordId + "</td>");
                    var $_td5 = $("<td>" + evaluate[i].createTime + "</td>");
                    var $_td6 = $("<td>" + evaluate[i].modifyTime + "</td>");
                    $_tr.append($_td0);
                    $_tr.append($_td1);
                    $_tr.append($_td2);
                    $_tr.append($_td3);
                    $_tr.append($_td4);
                    $_tr.append($_td5);
                    $_tr.append($_td6);
                    $(".container").append($_tr);
                }
            }
        })
    }
    $_btn_del.click(function () {
        //找到所有checkbox状态被选中的则调用删除
        $(":checkbox").each(function (index, ele) {
            //查找所有被选中的checkbox拿到他们身上的value
            if (ele.checked == true) {
                $.ajax({
                    url: "http://localhost:8080/evaluate/remove/" + ele.value,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data == 1) {
                            alert("删除成功");
                        } else {
                            alert("删除失败");
                        }
                    }
                });
            }
        });
        fillTable();
    });

    $("#btn_submit").click(function () {
        $.ajax(
            {
                url: "http://localhost:8080/evaluate/update",
                type: "post",
                dataType: "json",
                data: $("#frm_evaluate").serialize(),
                success: function (data) {
                    if (data.result = 1) {
                        alert("更新成功");
                        fillTable();
                    } else {
                        alert("更新失败");
                    }
                }
            }
        )
    })
</script>


</body>
</html>
